<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>build.html</title>

    <!--引入Vue组件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!--引入Axios组件，用来发送异步http请求的-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        .head-pic{
            height: 100%;
        }
    </style>

</head>
<body>
<div id="app">

    <!--
           添加按钮
             type      按钮的类型
             icon      图标
             @click   事件触发
     -->
    <el-button type="primary" icon="el-icon-edit" @click="addBuildDialog()">添加</el-button>


    <!--
        el-table  是表格标签
        data      数据绑定
        border    边框
        style     样式
            el-table-column   列的标签
                 label        列名
                 prop         设置json对象中的key、获取对应的值
      -->
    <el-table
            :data="buildings"
            border
            style="width: 100%">
        <el-table-column
                label="编号"
                prop="id"
                width="180">
        </el-table-column>
        <el-table-column
                label="楼栋"
                prop="numbers"
                width="180">
        </el-table-column>
        <el-table-column
                label="单元"
                prop="units"
                width="180">
        </el-table-column>

        <el-table-column
                label="楼栋的图片"
                prop="pic"
                width="180">
            <!-- 自定义的区域 插槽-->
            <template slot-scope="scope">
                <el-image
                        style="height: 120px"
                        :src="scope.row.pic"></el-image>
            </template>
        </el-table-column>

        <el-table-column
                align="center"
                label="备注"
                prop="remarks"
                width="180">
        </el-table-column>

        <el-table-column label="操作">

            <!-- 自定义的区域 插槽-->
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="editHandler(scope.$index, scope.row)">
                    编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="delHandler(scope.$index, scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--
            @size-change        页面大小变化触发的函数
            @current-change     页面页码变化触发的函数
            current-page        当前页面
            page-sizes          页面大小的集合
            page-size           页面大小
            total               总数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--
        title     标题
        visible   是否展示的属性 boolean
        model     表单绑定的对象
      -->
    <!--  action 图片上传的url
             on-success 上传执行成功的函数
             <img v-if="imageUrl" :src="imageUrl" class="head-pic">  上传成功的回显
        -->
    <el-dialog title="添加楼栋信息" :visible.sync="dialogAddFormVisible">
        <el-form :model="addBuild">
            <el-form-item label="numbers" label-width="80px">
                <el-input v-model="addBuild.numbers"></el-input>
            </el-form-item>
            <el-form-item label="单元" label-width="80px">
                <el-input v-model="addBuild.units"></el-input>
            </el-form-item>
            <el-form-item label="选择图片" label-width="80px">
                <el-upload
                        drag
                        action="http://localhost:8090/upload/upload"
                        :on-success="handleSuccess"
                        :show-file-list="false">
                    <img v-if="imageUrl" :src="imageUrl" class="head-pic">
                </el-upload>
            </el-form-item>

            <el-form-item label="备注" label-width="80px">
                <el-input v-model="addBuild.remarks"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAddFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAddBuild">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="编辑楼栋信息" :visible.sync="dialogFormVisible">
        <el-form :model="building">
            <el-form-item label="numbers" label-width="80px">
                <el-input v-model="building.numbers"></el-input>
            </el-form-item>
            <el-form-item label="单元" label-width="80px">
                <el-input v-model="building.units"></el-input>
            </el-form-item>
            <el-form-item label="备注" label-width="80px">
                <el-input v-model="building.remarks"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateBuilds">确 定</el-button>
        </div>
    </el-dialog>

</div>
<script>
    new Vue({                    // 创建一个Vue对象
        el:"#app",               // 选择器 Vue 作用的区域
        data:{                   // Vue 的数据 模型
            formLabelWidth:90,
            buildings:[],
            dialogFormVisible: false,
            dialogAddFormVisible:false,
            building:{},
            addBuild:{},
            currentPage:1,
            pageSizes:[2,4,6],
            pageSize:2,
            total:0,
            imageUrl:""
        },
        methods:{              //方法
            handleSuccess(response, file, fileList){
                console.log(response)
                console.log(file)
                console.log(fileList)
                //回显图片赋值
                this.imageUrl = response.obj;
                //把图片的url设置表单对象 存储到数据库中
                this.addBuild.pic =  response.obj;
            },
            //页面大小触发的函数
            handleCurrentChange(val){
                this.currentPage = val;  //页面传递过来的  currentPage 的值
                //调用方法
                this.pageQuery();
            },
            //大小的 触发的函数
            handleSizeChange(val){
                this.pageSize = val;   //页面传递过来的  pageSize 的值
                //调用方法
                this.pageQuery();
            },
            // 添加的数据提交
            submitAddBuild(){
                //提交数据
                //参数1:  url
                //参数2:  提交的数据  json数据
                axios.post("/building",this.addBuild).then(resp=>{

                    //关闭
                    this.dialogAddFormVisible = false;
                    //信息提示
                    this.$message({
                        message: resp.data.msg,
                        type: 'success'
                    });
                    this.getData();
                    //添加的数据表单对象清空
                    this.addBuild = {};
                    //图片上传完毕清理
                    this.imageUrl = "";
                })
            },
            //添加
            addBuildDialog(){
                this.dialogAddFormVisible = true;
            },

            //楼栋的修改
            updateBuilds(){
                //put 操作 不能包裹 data 直接给对象就可以
                axios.put("/building",this.building).then(resp=>{
                    if( resp.data.code == 200){
                        //关闭
                        this.dialogFormVisible = false;
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });
                        this.pageQuery();
                    }
                })
            },
            editHandler(index,row){
                //弹框
                this.dialogFormVisible = true
                //数据回显
                //JSON.stringify(row) 转成字符串
                //JSON.parse() 把字符串转成对象
                this.building = JSON.parse(JSON.stringify(row));
                this.building = row;
            },
            //删除 操作
            delHandler(index,row){
                let id = row.id;
                //确认框
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 成功的确认按钮
                    //发送的数据 参数在 : url
                    axios.delete(`/building/${id}`).then(resp=>{
                        if( resp.data.code == 200){
                            this.$message({
                                message: resp.data.msg,
                                type: 'success'
                            });
                            this.pageQuery();
                        }
                        //添加判断
                        if( resp.data.code == 500){
                            this.$message({
                                message: resp.data.msg,
                                type: 'warning'
                            });
                        }
                    })

                    /// 发送数据 params 参数、参数以键值对的方式在url上拼接发送过去的
                    //  http://localhost:8090/building?id=10
                    // axios.delete('/building',
                    //     {params:{id:id}}
                    // ).then(resp=>{
                    //     console.log(resp.data);
                    // })

                    // 发送数据 data 的参数: 参数在请求体中、以json的格式发送数据到服务器
                    // axios.delete('/building',
                    //     {data:{id:id,name:"zs"}}
                    // ).then(resp=>{
                    //     console.log(resp.data);
                    // })
                }).catch(() => {
                    // 失败的操作
                });
            },

            getData(){
                axios.get("/building/list").then(resp=>{
                    this.buildings = resp.data.obj;
                    console.log(resp.data.obj);
                })
            },
            pageQuery(){

                axios.get(`/building/page/${this.currentPage}/${this.pageSize}`).then(resp=>{
                       //返回数据
                    console.log(resp.data);
                       //页面展示的数据、总数
                    //  resp.data.obj = {data:[],total:"6"}
                     this.buildings =resp.data.obj.data
                     this.total =resp.data.obj.total;
                })
            }
        },
        created(){
            // this.getData()
            this.pageQuery();
        }
    })
</script>

</body>
</html>